<template>
    <div class="page flex-col">
        <div class="trading-history">
            <div class="list-container">
                <div class="item-container" v-for="(item, index) in list" :key="index">
                    <div class="img">
                        <img :src="getImage('../assets/' + (item.type == 1 ? 'fk.png' : item.type == 2 ? 'zz.png' : 'exchange.png'))"
                            alt="">
                    </div>
                    <!-- <img src="@/assets/visa 3.png" alt=""> -->
                    <div class="item-info">
                        <div class="info-text">
                            <p class="title">{{ item.status }}</p>
                            <p class="desc">{{ item.desc }}</p>
                            <p class="time">{{ item.time }}</p>
                        </div>
                        <div class="item-amount">
                            <p class="moeny">{{ item.moeny }} {{item.title}}</p>
                            <p class="" style="font-size: 15px;" :style="'color:' + (index == 0 || index == 5? '#D19310' : 'green')">
                                {{  index == 0 || index == 5? '确认中' : '已确认' }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="group_5 flex-row bottom-nav">
            <div class="image-text_3 flex-col">
                <img class="image_4" referrerpolicy="no-referrer"
                    src="https://lanhu-oss.lanhuapp.com/SketchPngb5a179b57265695c764913ad588f4330d1a741212fe9b742fde393bd591751bd" />
                <span class="text-group_6">账户</span>
            </div>

            <div class="image-text_5 flex-col">
                <img class="image_5" referrerpolicy="no-referrer" src="@/assets/nav-jy.png" />
                <span class="text-group_8" style="color: #D19310;">交易</span>
            </div>
            <div class="image-text_7 flex-col">
                <img class="thumbnail_7" referrerpolicy="no-referrer"
                    src="https://lanhu-oss.lanhuapp.com/SketchPngf93c6fd8b0580699d12423a39337d5444867cb15449db61d176fdb1bfc8828d3" />
                <span class="text-group_10">设置</span>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            list: [{
                type: 1,
                title: 'USD',
                desc: '交通出行',
                time: '11-10 05:45',
                moeny: '-100',
                status: '付款',
                balance: '9,600.000000'
            },
            {
                type: 2,
                title: 'USD',
                desc: '521...158',
                time: '11-05 20:45',
                moeny: '-100',
                status: '转账',
                balance: '9,700.000000'
            },
            {
                type: 1,
                title: 'USD',
                desc: '餐饮',
                time: '11-02 18:45',
                moeny: '-200',
                status: '付款',
                balance: '9,800.000000'
            },
            {
                type: 3,
                title: 'USD',
                desc: '欧元',
                time: '11-01 05:45',
                moeny: '-1,000',
                status: '兑换',
                balance: '100'
            },
            {
                type: 1,
                title: 'USDT',
                desc: 'TWyg1c...VYQX',
                time: '11-10 05:45',
                moeny: '-100',
                status: '发送',
                balance: '9,600.000000'
            },
            {
                type: 2,
                title: 'USDT',
                desc: 'TVegUx..5WEJ',
                time: '11-05 20:45',
                moeny: '-100',
                status: '接收',
                balance: '9,700.000000'
            },
            {
                type: 1,
                title: 'USDT',
                desc: 'TVegUx..5WEJ',
                time: '11-02 18:45',
                moeny: '-200',
                status: '发送',
                balance: '9,800.000000'
            },
            {
                type: 3,
                title: 'USDT',
                desc: 'TghdDx..DFEJ',
                time: '11-01 05:45',
                moeny: '-1,000',
                status: '兑换',
                balance: '100'
            }
            ]
        };
    },
    methods: {
        getImage(imageName) {

            return new URL(imageName, import.meta.url).href;
        }
    },
    created() {
        document.title = "交易"
    }
};
</script>
<style src="./walletcss/common.css" />
<style src="./walletcss/index.css" />

<style lang="less" scoped>
.group_2 {
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.page {
    background: #fff;
    padding-bottom: 60px;
    overflow: auto;
}

.bottom-nav {
    position: fixed;
    bottom: 0;
    z-index: 999;
    width: 100%;
    left: 0;
    top: unset;
    padding-left: 0;
    padding-right: 0;

    // height: 60px;
    // background: #fff;
    // border-top: 1px solid #eee;
    .flex-col {
        margin-left: 0;
        flex: 1;
        text-align: center;
        display: flex;
        align-items: center;
    }
}


.trading-history {
    // border-top: 1px solid #ccc;
    padding: 20px 30px;

    &>.title {
        font-size: 18px;
        margin-bottom: 20px;
    }

    .list-container {
        background: #fff;
        border-radius: 12px;
        padding-bottom: 15px;

        .time {
            font-size: 12px;
            color: #666;
            margin-bottom: 10px;

        }

        .box_2 {
            margin: 0;
        }

        .group_1 {
            padding: 15px;
        }

        .item-container {
            margin-top: 15px;
            display: flex;
            align-items: flex-start;

            &:last-child {
                .item-info {
                    border: 0;
                }
            }

            .img {
                width: 30px;
                height: 30px;
                background: #f1f1f1;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 50%;
                margin-right: 10px;

                img {
                    width: 15px;
                }
            }

            .item-info {
                flex: 1;
                padding-bottom: 5px;
                display: flex;
                justify-content: space-between;

                .info-text {
                    .title {
                        margin-top: -1px;
                        // line-height: 25px;
                        font-size: 15px;
                        color: #242326;
                        // font-weight: bold;
                    }

                    .desc {
                        line-height: 18px;
                        color: #ccc;
                        font-size: 13px;
                    }

                    .time {
                        line-height: 18px;
                        color: #ccc;
                        font-size: 12px;
                    }
                }

                .item-amount {
                    // padding-right: 15px;
                    text-align: right;

                    .moeny {
                        // font-weight: bold;
                        font-size: 20px;
                    }

                    .status {
                        font-size: 13px;
                        color: #ccc;
                    }

                    .balance {
                        color: #ccc;
                        font-size: 13px;
                    }
                }
            }
        }
    }
}
</style>